<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- div id="app" 挂载点 -->
    <div id="app">
      <!-- 使用自定义指令 v-color 并传入颜色值 -->
      <div v-color="color">这是一个有背景颜色的 div</div>
      <button @click="changeColor">改变颜色</button>
      <div v-xss>你好,陈严标</div>
      <div v-czxss="a">你好,陈全扬</div>
      <div v-jbczxss="b">你好,陈宇</div>
      <div v-jbczcyh="c">你好,陈宇</div>
      <label for="">表单自动聚焦</label>
      <br />
      <input v-focus />
      <br />
      <label for="">表单未自动聚焦</label>
      <br />
      <input />
    </div>
    <!-- 使用javascript 脚本 -->
    <script type="text/javascript">
      // 全局注册自定义指令 v-color
      Vue.directive("color", {
        // bind 钩子函数，指令第一次绑定到元素时调用
        bind: function (el, binding) {
          // 设置元素的背景颜色
          el.style.backgroundColor = binding.value;
        },
        // update 钩子函数，所在组件的 VNode 更新时调用
        update: function (el, binding) {
          // 更新元素的背景颜色
          el.style.backgroundColor = binding.value;
        },
      });
      // 全局注册自定义指令
      Vue.directive("xss", {
        // 指令的定义
        inserted: function (el, binding) {
          // 设置元素的样式  设置字体颜色为红色
          el.style.color = "red";
        },
      });
      // Vue.directive('czxss',function(color){
      //     el.style.Color = color;
      // })
      // Vue.directive('czxss',function(el,color){
      //     el.style.Color = color.value;
      // })
      Vue.directive("czxss", {
        inserted: function (el, binding) {
          // 设置元素的样式  设置字体颜色为传入的颜色
          el.style.background = binding.value;
        },
      });
      // Vue.directive('czxss',{
      //     inserted: function (el, color) {
      //         // 设置元素的样式  设置字体颜色为传入的颜色
      //         el.style.color = color.value;
      //     }
      // })

      // 创建一个vue实例
      var vm = new Vue({
        // 挂载点
        el: "#app",
        data: {
          // 数据
          a: "green",
          b: "pink",
          c: "blue",
          color: "red",
        },
        // 自定义局部指令
        directives: {
          // 指令
          jbczxss: function (el, color) {
            // 设置元素的样式  设置字体颜色为传入的颜色
            el.style.color = color.value;
          },
          jbczcyh: {
            inserted: function (el, binding) {
              // 设置元素的样式  设置字体颜色为传入的颜色
              el.style.color = binding.value;
            },
          },
          focus: {
            // 指令的定义
            inserted: function (el) {
              el.focus();
            },
          },
        },
        methods: {
          changeColor() {
            // 切换颜色
            this.color = this.color === "red" ? "blue" : "red";
          },
        },
      });
    </script>
  </body>
</html>
